<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>常熟理工问卷系统</title>
    <link rel="stylesheet" th:href="@{/asserts/bootstrap4/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/asserts/css/TeacherSystem.css}">
</head>
<body>
<div th:replace="Default::topNav(${username},${account})"></div>
<div th:replace="Default::leftNav('AddQuestion',${userType})"></div>
<div class="container-fluid">
    <div class="editTool">
        <div class="toolTitle">
            工具栏
        </div>
        <div class="toolComponent" id="oneChoose">
            <img th:src="@{/asserts/img/danxuan.png}"> 单选
        </div>
        <div class="toolComponent" id="moreChoose">
            <img th:src="@{/asserts/img/duoxuan.png}"> 多选
        </div>
        <div class="toolComponent" id="oneLineText">
            <img th:src="@{/asserts/img/danhang.png}"> 单行文本
        </div>
        <div class="toolComponent" id="moreLineText">
            <img th:src="@{/asserts/img/duohang.png}"> 多行文本
        </div>
        <div class="toolComponent" id="recommendPerson">
            <img th:src="@{/asserts/img/recommendPerson.png}"> 人员推荐
        </div>
    </div>
    <div class="editArea">
        <div class="questionForm">
            <div class="formComponent form_title">
                <span>问卷标题：</span>
                <input type="text" id="question_title" class="form-control" th:value="${title}"/>
            </div>
            <div class="formComponent">
                <div>
                    <span>开始时间：</span>
                    <input type="datetime-local" id="start_time" class="form-control form_time" th:value="${starttime}"/>
                </div>
                <div>
                    <span>结束时间：</span>
                    <input type="datetime-local" id="finish_time" class="form-control form_time" th:value="${finishtime}"/>
                </div>
            </div>

            <div id="appendSite">
                <!--<div class="thy_each" th:each="one_question: ${content}">-->
                    <!--<div th:replace="TeacherDefault :: ${one_question.type}(${one_question},${one_questionStat.count})"></div>-->
                <!--</div>-->
            </div>

            <div class="formComponent formOperation">
                <button class="btn btn-dark" id="save">保存</button>
                <button class="btn btn-success" id="publish">发布</button>
            </div>
        </div>
    </div>
    <div class="component_model" style="display: none">
        <!--单选模板-->
        <div class="appendComponent oneChoose_model">
            <img th:src="@{/asserts/img/delete.png}" class="img_appendDelete"/>
            <div>
                <span class="titleNum"></span>
                <input type="text" class="form-control model_text onequestion_title"/>
                (单选)
            </div>
            <!--单选选项部分-->
            <div class="oneChoose_Options">
                <div class="oneOption">
                    <span>A.</span>
                    <input type="text" class="form-control option_text"/>
                </div>
                <div class="oneOption">
                    <span>B.</span>
                    <input type="text" class="form-control option_text"/>
                </div>
                <div class="addOption">
                    <img th:src="@{/asserts/img/addoption_1.png}" class="img_addOption"> 添加选项
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <!--多选模板-->
        <div class="appendComponent moreChoose_model">
            <img th:src="@{/asserts/img/delete.png}" class="img_appendDelete"/>
            <div>
                <span class="titleNum"></span>
                <input type="text" class="form-control model_text onequestion_title"/>
                (多选)
            </div>
            <!--多选选项部分-->
            <div class="moreChoose_Options">
                <div class="oneOption">
                    <span>A.</span>
                    <input type="text" class="form-control option_text"/>
                </div>
                <div class="oneOption">
                    <span>B.</span>
                    <input type="text" class="form-control option_text"/>
                </div>
                <div class="addOption">
                    <img th:src="@{/asserts/img/addoption_1.png}" class="img_addOption"> 添加选项
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <!--单行文本模板-->
        <div class="appendComponent oneLineText_model">
            <img th:src="@{/asserts/img/delete.png}" class="img_appendDelete"/>
            <div>
                <span class="titleNum"></span>
                <input type="text" class="form-control model_text onequestion_title"/>
                (单行文本)
            </div>
            <div class="oneLine_seize">回答区</div>
        </div>

        <!--多行文本模板-->
        <div class="appendComponent moreLineText_model">
            <img th:src="@{/asserts/img/delete.png}" class="img_appendDelete"/>
            <div>
                <span class="titleNum"></span>
                <input type="text" class="form-control model_text onequestion_title"/>
                (多行文本)
            </div>
            <div class="moreLine_seize">回答区</div>
        </div>

        <!--人员推荐模板-->
        <div class="appendComponent recommendPerson_model">
            <img th:src="@{asserts/img/delete.png}" class="img_appendDelete"/>
            <div>
                <span class="titleNum"></span>
                <input type="text" class="form-control model_text onequestion_title" />
                (人员推荐)
            </div>
            <div class="recommendPerson_seize">
                <div class="recommendPerson_msg">姓名:</div>
            </div>
        </div>

        <!--单选 选项模板-->
        <div class="oneOption oneChoose_option">
            <span>C.</span>
            <input type="text" class="form-control option_text"/>
            <img th:src="@{/asserts/img/deloption.png}" class="img_icon img_deloption">
        </div>

        <!--多选 选项模板 -->
        <div class="oneOption moreChoose_option">
            <span>C.</span>
            <input type="text" class="form-control option_text"/>
            <img th:src="@{/asserts/img/deloption.png}" class="img_icon img_deloption">
        </div>
    </div>
</div>
</body>
<script th:src="@{/asserts/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/asserts/js/popper.min.js}"></script>
<script th:src="@{/asserts/bootstrap4/js/bootstrap.js}"></script>
<script th:src="@{/asserts/js/canvas-nest.min.js}"></script>
<script th:replace="Default :: linklist(${userType})"></script>
<script th:if="${userType} eq 'Teacher'">
    $("#AuditForm").click(function () {
        window.location.href = "/TeacherAuditForm?page=1";
    });
</script>
<script th:inline="javascript">
    $(function () {
        var code = ["A.","B.","C.","D.","E.","F.","G.","H.","I.","J.","K.","L.","M.","N.","O.","P.","Q.","R.","S.","T.",
        "U.","V.","W.","X.","Y.","Z."];
        var content = [[${content}]];
        for (var i = 0;i < content.length;i ++){
            var number = i + 1;
            var title = content[i].title;
            var classname ="."+content[i].type+"_model";
            var component = $(".component_model").children(classname).clone(true);
            switch (content[i].type) {
                case "oneChoose":
                case "moreChoose":
                    var optionArea = "."+content[i].type+"_Options";
                    var optionname = "."+content[i].type+"_option";
                    var options = content[i].options;

                    component.find(".titleNum").text(number.toString()+"、");
                    component.find(".onequestion_title").val(title);
                    for (var j = 0;j < options.length;j ++){
                        if (j < 2){
                            var fix_option = component.find(".oneOption");
                            $(fix_option[j]).children(".option_text").val(options[j]);
                        }else {
                            var oneoption = $(".component_model").children(optionname).clone(true);
                            oneoption.children("span").text(code[j]);
                            oneoption.children(".option_text").val(options[j]);
                            // &#65;
                            var addoption = component.children(optionArea).children(".addOption");
                            addoption.before(oneoption);
                        }
                    }
                    break;
                case "oneLineText":
                case "moreLineText":
                case "recommendPerson":
                    component.find(".titleNum").text(number+"、");
                    component.find(".onequestion_title").val(title);
                    break;
            }
            $("#appendSite").append(component);
        }
    });


    // 效果
    $(".addOption").mouseover(function () {
        $(this).find(".img_addOption").attr("src","/asserts/img/addoption_2.png");
    });
    $(".addOption").mouseout(function () {
        $(this).find(".img_addOption").attr("src","/asserts/img/addoption_1.png");
    });
    $(".oneOption").mouseover(function () {
        $(this).find(".img_deloption").css("display","inline");
    });
    $(".oneOption").mouseout(function () {
        $(this).find(".img_deloption").css("display","none");
    });

    // 添加不同表单组件事件
    function appendComponent(classname){
        var number = $("#appendSite").children().length+1;
        var component = $(".component_model").children(classname).clone(true);
        component.find(".titleNum").text(number.toString()+"、");
        $("#appendSite").append(component);
    }
    $("#oneChoose").click(function () {
        appendComponent(".oneChoose_model");
    });
    $("#moreChoose").click(function () {
        appendComponent(".moreChoose_model");
    });
    $("#oneLineText").click(function () {
        appendComponent(".oneLineText_model");
    });
    $("#moreLineText").click(function () {
        appendComponent(".moreLineText_model");
    });
    $("#recommendPerson").click(function () {
        appendComponent(".recommendPerson_model");
    });

    // 删除表单组件
    $(".img_appendDelete").click(function () {
        $(this).parent().remove();
        var components = $("#appendSite").children(".appendComponent");
        for (var i = 0;i < components.length;i++) {
            var oneComponent = $(components[i]);
            oneComponent.find(".titleNum").text(i+1+"、");
        }
    });

    // 表单添加选项
    $(".addOption").click(function () {
        var classname = $(this).parents(".appendComponent").attr("class");
        switch(classname){
            case "appendComponent oneChoose_model":
                var optNum = $(this).parent().children(".oneOption").length+65;
                if (optNum-65>=10){
                    alert("选项不得多于10个！");
                    return;
                }
                var newoption = $(".component_model").children(".oneChoose_option").clone(true);
                newoption.children("span").text(String.fromCharCode(optNum)+".");
                $(this).before(newoption);
                break;

            case "appendComponent moreChoose_model":
                var optNum = $(this).parent().children(".oneOption").length+65;
                if (optNum-65>=15){
                    alert("选项不得多于15个！");
                    return;
                }
                var newoption = $(".component_model").children(".moreChoose_option").clone(true);
                newoption.children("span").text(String.fromCharCode(optNum)+".");
                $(this).before(newoption);
                break;

        }
    });

    // 表单删除选项
    $(".img_deloption").click(function () {
        var flag = $(this).parents(".oneChoose_Options");
        $(this).parent().remove();
        var options = flag.find(".oneOption");
        for (var i = 0;i < options.length;i++){
            var option = $(options[i]);
            option.children("span").text(String.fromCharCode(i+65)+".");
        }
    });

    // 提交发布表单
    function getData() {
        var title = $("#question_title").val().trim();
        if (title === ""){
            alert("问卷标题未输入！");
            return null;
        }
        var starttime = $("#start_time").val();
        var finishtime = $("#finish_time").val();
        if (starttime === "" || finishtime === ""){
            alert("开始或结束时间未设置完全！");
            return null;
        }
        var allComponents = $("#appendSite").find(".appendComponent");
        var data = {
            title:title,
            starttime:starttime,
            finishtime:finishtime,
            questions:[]
        };
        for (var i = 0;i < allComponents.length;i ++){
            var question = {};
            var oneComponent = $(allComponents[i]);
            var com_class = oneComponent.attr("class");

            var options;
            var question_options = [];
            var option;
            var oneoption;
            switch (com_class) {
                case "appendComponent oneChoose_model":
                    question.type = "oneChoose";
                    question.title = oneComponent.find(".onequestion_title").val().trim();
                    if (question.title === ""){
                        alert("第"+i+1+"题问题未输入！");
                        return null;
                    }
                    options = oneComponent.find(".option_text");
                    question_options = [];
                    for (var j = 0;j < options.length;j ++){
                        option = $(options[j]);
                        oneoption = option.val().trim();
                        if (oneoption === ""){
                            alert("第"+i+1+"题问题,第"+String.fromCharCode(j+65)+"个选项未输入！");
                            return null;
                        }
                        question_options.push(oneoption);
                    }
                    question.options = question_options;
                    data.questions.push(question);
                    break;
                case "appendComponent moreChoose_model":
                    question.type = "moreChoose";
                    question.title = oneComponent.find(".onequestion_title").val().trim();
                    if (question.title === ""){
                        alert("第"+i+1+"题问题未输入！");
                        return;
                    }
                    options = oneComponent.find(".option_text");
                    question_options = [];
                    for (var j = 0;j < options.length;j ++){
                        option = $(options[j]);
                        oneoption = option.val().trim();
                        if (oneoption === ""){
                            alert("第"+i+1+"题问题,第"+String.fromCharCode(j+65)+"个选项未输入！");
                            return null;
                        }
                        question_options.push(oneoption);
                    }
                    question.options = question_options;
                    data.questions.push(question);
                    break;
                case "appendComponent oneLineText_model":
                    question.type = "oneLineText";
                    question.title = oneComponent.find(".onequestion_title").val().trim();
                    if (question.title === ""){
                        alert("第"+i+1+"题问题未输入！");
                        return null;
                    }
                    data.questions.push(question);
                    break;
                case "appendComponent moreLineText_model":
                    question.type = "moreLineText";
                    question.title = oneComponent.find(".onequestion_title").val().trim();
                    if (question.title === ""){
                        alert("第"+i+1+"题问题未输入！");
                        return null;
                    }
                    data.questions.push(question);
                    break;
                case "appendComponent recommendPerson_model":
                    question.type = "recommendPerson";
                    question.title = oneComponent.find(".onequestion_title").val().trim();
                    if (question.title === ""){
                        alert("第"+i+1+"题问题未输入！");
                        return null;
                    }
                    data.questions.push(question);
                    break;
            }
        }
        console.log(data);
        return data;
    }
    $("#save").click(function () {
        var data = getData();
        $.ajax({
            type: "POST",
            url: [[${"/"+userType+"EditQuestion/save/"+id}]],
            contentType:"application/json",
            dataType:"json",
            data:JSON.stringify(data),
            beforeSend(XML){
                if (!data) {
                    return false;
                }
            },
            success:function (data) {
                if (data.code === 200){
                    alert("保存成功！");
                    window.location.href=[[${"/"+userType+"Home?page=1"}]];
                } else {
                    alert(data.msg);
                }
            },
            error:function (err) {
                alert(err.toString());
            }

        })
    });
    $("#publish").click(function () {
        var data = getData();
        $.ajax({
            type: "POST",
            url: [[${"/"+userType+"EditQuestion/publish/"+id}]],
            contentType:"application/json",
            dataType:"json",
            data:JSON.stringify(data),
            beforeSend(XML){
                if (!data) {
                    return false;
                }
            },
            success:function (data) {
                if (data.code === 200){
                    alert("发布成功！");
                    window.location.href=[[${"/"+userType+"Home?page=1"}]];
                } else {
                    alert(data.msg);
                }
            },
            error:function (err) {
                alert(err.toString());
            }

        })
    });

</script>
</html>